<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: auto;
          }
          h1{
            text-align: center;
          }
       .tou{
        width: 500px;
        height: 80px;
        
       }
       .tou ul{
        width: 500px;
        height: 80px;
        display: flex;
        flex-direction: row;
       }
       img{
        width: 150px;
        height: 150px;
       }
       .one{
        width: 600px;
        height: 200px;
        display: flex;
        flex-direction: row;
       }
       table{
        width: 800px;

       }
       tbody tr{
        width: 800px;
        height: 150px;
       }
       h2{
        text-align: center;
        position: relative;
        top: 100px;
       }
       table{
        position: relative;
        top: 150px;
       }
    </style>
</head>
<body>
    <h1>热销爆款</h1>
    <div class="tou"><ul>
        <li onclick="kai()">空调</li>
        <li onclick="two()">平板电器</li>
        <li onclick="therr()">洗衣机</li>
    </ul></div>
    <ul class="one"> 
        
        
    </ul>
    <h2>购物车</h2>
    <table border="1px">
        <thead>
            <tr>
                <td> <input type="checkbox" class="quan" onclick="xuan()"> 全选</td>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
                
        </thead>
        <tbody>

        </tbody>
    </table>
<script>
    var arr = [
        {
            img:'https://paimgcdn.baidu.com/24BCE86C7EAF1B01?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16173383402.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 2匹3匹',
            jiage:3899
        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/ADF29C1EBF45A489?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F9855694026.jpg&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-72LW',
            jiage:6099
        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/2A2E8A0C9513341C?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16759572162.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-35GW',
            jiage:3699
        }
    ]
    var arr2 = [
        {
            id:1,
            img:'https://img1.360buyimg.com/n6/jfs/t1/302656/28/10730/139590/6839133bF4464fbe5/16ba197fe02539a3.jpg',
            jieshao:'小米电视 55英寸一级能效',
            jiage:1599
        },
        {
            id:2,
            img:'https://img1.360buyimg.com/n6/jfs/t1/299435/17/11254/176105/68382db8F94496336/203497f4188c3d67.jpg',
            jieshao:'创维电视65A3F',
            jiage:1999
        },
        {
            id:3,
            img:'https://img1.360buyimg.com/n6/jfs/t1/304851/12/6082/122923/6837db9bFa0ec6bc8/7d3d1a6be9beb1ea.jpg',
            jieshao:'D&Q65英寸4K显示器',
            jiage:2599
        },
    ]
    var arr3 = [
        {
            id:1,
            img:'https://paimgcdn.baidu.com/82BE4FB21FE8CE0E?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F17710164518.jpg&rz=urar_2_968_600&v=0',
            jieshao:'小鸭牌 透明黑',
            jiage:448
        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/D6354C9513CA06D9?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F17839366950.jpg&rz=urar_2_968_600&v=0',
            jieshao:'小鸭牌 商用洗脱108升',
            jiage:2880
        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/7F21942C2509E8BA?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F13499885737.jpg&rz=urar_2_968_600&v=0',
            jieshao:'邦乐尼工业洗衣机',
            jiage:16101.84
        },
    ]
    // 渲染
    var one = document.querySelector('.one')
    function yi(){
        
        one.innerHTML = ''
        arr.forEach(item =>{
       one.innerHTML += `
       <li>
            <img src="${item.img}" alt=""><br>
            <span>${item.jieshao}</span>
            <p>${item.jiage}</p>
            <button onclick='tian(${item.id})'>加入购物车</button>
        </li>`
    })
    }
    yi()

    function er(){
        
        one.innerHTML = ''
        arr2.forEach(item =>{
       one.innerHTML += `
       <li>
            <img src="${item.img}" alt=""><br>
            <span>${item.jieshao}</span>
            <p>${item.jiage}</p>
            <button onclick='tian(${item.id})'>加入购物车</button>
        </li>`
    })
    }
    
    function san(){
       
        one.innerHTML = ''
        arr3.forEach(item =>{
            one.innerHTML += `
       <li>
            <img src="${item.img}" alt=""><br>
            <span>${item.jieshao}</span>
            <p>${item.jiage}</p>
            <button onclick='tian(${item.id})'>加入购物车</button>
        </li>`
        })
    }
    // 切换
    function kai(){
        yi()
    }
    function two(){
        er()
    }
    function therr(){
        san()
    }
    // 购物车
    var table = document.querySelector('tbody')
    var arr4 = []
    function tian(i){
       var a = arr.find(item => item.id == i )
       arr4.push({
          id: arr4.length + 1,
          img: a.img,
          jieshao: a.jieshao,
          jiage:a.jiage,
          num: 1
       })
       che()
    }

     function che(){
        table.innerHTML = ''
        arr4.forEach(item =>{
            table.innerHTML += `
        <tr>
            <td><input type="checkbox" class = 'xiao'></td>
            <td><img src="${item.img}" alt=""><span>${item.jieshao}</span></td>
            <td>${item.jiage}</td>
            <td><button onclick = 'jia(${item.id})'>+</button>${item.num}<button onclick = 'jian(${item.id})'>-</button></td>
            <td><button onclick = 'shan(${item.id})'>删除</button></td>
        </tr>`
        })
     }
    //  删除单个
    function shan(h){
        var b = arr4.findIndex(item => item.id == h)
        arr4.splice(b,1)
        che()
    }
    // +1
    function jia(i){
        var c = arr4.find(item => item.id == i)
        c.num++
        che()
    }
    // -1
    function jian(i){
        var c = arr4.find(item => item.id == i)
        if( c.num >1){
            c.num--
            che()
        }
        
        
    }
    // 全选
    var quan = document.querySelector('.quan')
    
    function xuan(){
        var xiaoxuan = document.querySelectorAll('.xiao')
        xiaoxuan.forEach(item => {
           if(quan.checked == true){
            item.checked = true
        }else if(quan.checked == false){
            item.checked = false
        }
        })
        
        
    }
    
</script>

</body>
</html>